import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text, Image, TouchableNativeFeedback, TouchableOpacity } from 'react-native';

export default class BottomTabNav extends Component {
    render() {
        let navdatas = [{        
            img: require('../assets/img/home.png'),
            hovimg: require('../assets/img/homePress.png'),
        }, {
           
            img: require('../assets/img/shop.png'),
            hovimg: require('../assets/img/shopPress.png'),
        }, {
           
            img: require('../assets/img/more.png'),
            hovimg: require('../assets/img/morePress.png'),
        }, {
            
            img: require('../assets/img/mine.png'),
            hovimg: require('../assets/img/minePress.png'),
        }]
        let navs = []
        for (var i = 0; i < navdatas.length; i++) {
            if (Platform.OS === 'android')
                navs.push(
                    <TouchableNativeFeedback key={i} onPress={this.navClick.bind(this, i)}>
                        <View style={styles.navitem}>
                            <Image style={styles.icon} source={this.props.index == i ? navdatas[i].hovimg : navdatas[i].img}></Image>
                            <Text style={styles.text}>{navdatas[i].text}</Text>
                        </View>
                    </TouchableNativeFeedback>
                )
            else
                navs.push(
                    <TouchableOpacity key={i} onPress={this.navClick.bind(this, i)}>
                        <View style={styles.navitem}>
                            <Image style={styles.icon} source={this.props.index == i ? navdatas[i].hovimg : navdatas[i].img}></Image>
                            <Text style={styles.text}>{navdatas[i].text}</Text>
                        </View>
                    </TouchableOpacity>
                )
        }
        return (
            
            <View style={styles.navs}>
                {navs}
            </View>
        );
    }
    navClick(index) {
        this.props.actionChange(index)
    }
}



const styles = StyleSheet.create({
    navs: {
        height:45,
        flexDirection: 'row',
        justifyContent: 'space-around',
        borderColor: '#f5f5f5',
        borderTopWidth: 1,
        backgroundColor: '#f5f5f5',
    },
    navitem: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        height: 60,
        width: 80
    },
    icon: {
        width: 25,
        height: 25
    },
    text: {
        textAlign: 'center',
        fontSize: 12
    }
});
